﻿<template>
    <el-container>
        <el-main>
            <el-form ref="form"
                     :model="data"
                     :rules="formRules"
                     label-width="120px">


                <el-form-item label="当前密码"
                              prop="currentPassword">
                    <el-input v-model="data.currentPassword"
                              type="password"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="新密码"
                              prop="newPassword">
                    <el-input v-model="data.newPassword"
                              type="password"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="确认新密码"
                              prop="newPasswordConfirm">
                    <el-input v-model="data.newPasswordConfirm"
                              type="password"
                              autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer style="text-align:right;">
            <el-button @click="$emit('cancel')">取消</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    if (this.data.newPasswordConfirm !== '') {
                        this.$refs.form.validateField('newPasswordConfirm');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                console.log(value);
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.data.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                data: {
                    currentPassword: '',
                    newPassword: '',
                    newPasswordConfirm: ''
                },
                formRules: {
                    currentPassword: [
                        { required: true, message: '请输入当前密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ],
                    newPasswordConfirm: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {

        },
        methods: {
            onSave() {
                var self = this;
                self.$refs.form.validate((valid) => {
                    if (valid) {
                        self.$http
                            .post('/api/identity/my-profile/change-password', self.data)
                            .then(() => {
                                self.data = {
                                    currentPassword: '',
                                    newPassword: '',
                                    newPasswordConfirm: ''
                                };
                                self.$message.success('修改密码成功！');
                                self.$emit("cancel");
                            });
                    } else {
                        return false;
                    }
                });
            },

        }
    }
</script>

<style scoped>
</style>